<template>
	<div class="hdbox">
		<div class="hdbox0">
			<div class="hdbox_1">
				<a @click="goBack" class="goback">
					<img src="@/assets/picture/goback.png">
				</a>
			</div>
			<div class="hdbox_3">
				<router-link to="/gwc">
					<img src="@/assets/picture/h1.png" />
				</router-link>
			</div>
		</div>
	</div>
	<input type="hidden" id="productId" :value="ProductDetail.id" ref="productId" />
	<div class="hbox"></div>
	<a name="m1">
		<div class="xqbox1">
			<img src="@/assets/picture/xq3.png" width="100%" />
			<p class="tit">{{ ProductDetail.name }}</p>
			<div class="qita">
				<p class="p1">￥{{ ProductDetail.price }}</p>
				<p class="p2">库存{{ ProductDetail.num }}</p>
			</div>
		</div>
	</a>
	<div class="xqbotbox">
		<div class="xqbotbox0">
			<div class="xqbotboxR">
				<a class="a2 sizetype" @click="showSize(0)">立即购买</a>
				<a v-if="ProductDetail.is_sale == 0" class="a1 sizetype" @click="showSize(1)">加入购物车</a>
			</div>
		</div>
	</div>
	<div class="xzsize">
		<div class="xzsize0">
			<div class="f_mask0"></div>
			<div id="size" :style="{ bottom: sizeBottom }">
				<div class="size1">
					<div class="size1_1">
						<img src="@/assets/picture/xq3.png" />
					</div>
					<div class="size1_2">
						<p class="p1">￥{{ ProductDetail.price }}</p>
						<p class="p2">商品名称：{{ ProductDetail.name}}</p>
						<p class="p3">库存{{ ProductDetail.num }}件</p>
					</div>
					<div class="size1_3" @click="closeSize()">
						<img src="@/assets/picture/close.png" />
					</div>
				</div>
				<div class="size2">
					<div class="size2_1">
						<p class="tit">数量</p>
						<div class="lnums">
							<div class="num1" @click="decreaseQuantity">-</div>
							<div class="num2">{{ buyNum }}</div>
							<div class="num3" @click="increaseQuantity">+</div>
						</div>
					</div>
				</div>
				<div class="size3">
					<a @click="hideSize(1)">确定</a>
				</div>
			</div>
		</div>
	</div>
	<div v-if="tip" class="tip-layer">
		<div class="tip">{{tipContent}}</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		ref
	} from 'vue';
	import {
		showTips
	} from '@/assets/js/common.js';
	export default {
		name: 'xq',
		props: {
			msg: String
		},
		data() {
			return {
				httpUrl: 'http://qgm1.fengjian123.com/service9501/',
				tipContent: '',
				tip: 0,
				ProductDetail: '',
				sizeBottom: '-80%',
				buyNum: 1,
				isCart: 0,
				isBuy: 0,
				cartList: [],
			};
		},
		setup() {
			const inputRef = ref(null);
			return {
				inputRef
			};
		},
		mounted() {
			const productId = this.$route.params.id;
			const is_sale = this.$route.query.is_sale;
			this.fetchData(productId, is_sale);
		},
		methods: {
			async fetchData(productId, is_sale) {
				const postData = {
					id: productId,
					is_sale: is_sale
				};
				axios.post(this.httpUrl + 'product/ProductDetail', postData)
					.then(res => {
						const responseData = res.data;
						if (responseData.err == 0) {
							this.ProductDetail = responseData.detail;
						} else {
							showTips(this, '获取失败');
							console.log(responseData.msg);
							this.$router.go(-1); // 返回上一页
						}
					})
					.catch(error => {
						console.error("获取商品失败，请检查网络", error);
						showTips(this, '获取商品失败，请检查网络');
					});
			},
			showSize(isCart) {
				this.isCart = isCart;
				this.$nextTick(() => {
					this.sizeBottom = '0%';
				});
			},
			hideSize() {
				const sessionData = window.sessionStorage.getItem('users');
				if (sessionData == null) {
					this.$router.push('/login');
					console.log("登录失效");
					return;
				}

				const userData = JSON.parse(sessionData);

				if (this.isCart) { //加入购物车
					const cartData = window.sessionStorage.getItem('cart_' + userData.id);
					if (cartData) {
						this.cartList = JSON.parse(cartData);
					} else {
						this.cartList = [];
					}

					const existingItem = this.cartList.find(item => item.productId === this.$refs.productId.value);
					if (existingItem) {
						existingItem.buyNum += this.buyNum;
						existingItem.pay = existingItem.buyNum * existingItem.price;
					} else {
						this.cartList.push({
							productId: this.$refs.productId.value,
							buyNum: this.buyNum,
							name: this.ProductDetail.name,
							price: this.ProductDetail.price,
							pay: this.buyNum * this.ProductDetail.price,
							selected: false,
						});
					}
					sessionStorage.setItem('cart_' + userData.id, JSON.stringify(this.cartList));
					showTips(this, '加入成功');
				} else { //立即购买
					const productData = {
						"productList": [{
							"productId": this.$refs.productId.value,
							"buyNum": this.buyNum
						}],
						"is_sale": this.ProductDetail.is_sale,
						"is_now": 1,
					};
					sessionStorage.setItem('productData_' + userData.id, JSON.stringify(productData));
					this.$router.push('/jiesuan');
				}
				this.$nextTick(() => {
					this.sizeBottom = '-80%';
				});
			},
			closeSize() {
				this.$nextTick(() => {
					this.sizeBottom = '-80%';
				});
			},
			decreaseQuantity() {
				if (this.buyNum > 1) {
					this.buyNum -= 1;
				}
			},
			increaseQuantity() {
				this.buyNum += 1;
			},
			goBack() {
				this.$router.go(-1);
			},
		},
	}
</script>

<style>
	@import url('@/assets/css/style.css');
</style>